//1.导入需要的模块并创建正则表达式
const fs = require('fs');
const path = require('path');

const regStyle = /<style>[\s\S]*<\/style>/;
const regScript = /<script>[\s\S]*<\/script>/;

//2.使用fs模块读取需要被处理的html文件
fs.readFile(path.join(__dirname, '/source/index.html'), 'utf8', function (err, dataStr) {
  if (err) {
    return console.log(`读取文件失败：${err.massage}`)
  }
  resolveCSS(dataStr);
  resolveJS(dataStr);
  resolveHTML(dataStr);
})

//处理css样式
function resolveCSS(htmlStr) {
  //使用正则提取需要的内容
  const r1 = regStyle.exec(htmlStr);
  //将提取出来的字符串，进行字符串replace替换操作
  const newCSS = r1[0].replace('<style>', '').replace('</style>', '');
  //调用fs.writeFile()方法，将提取的样式，写入index.css文件里
  fs.writeFile(path.join(__dirname, './clock/index.css'), newCSS, function (err) {
    if (err) {
      return console.log(`写入CSS样式失败：${err.massage}`);
    }
    console.log(`写入CSS样式成功`);
  })
}

//处理js脚本
function resolveJS(htmlStr) {
  const r2 = regScript.exec(htmlStr);
  const newJS = r2[0].replace('<script>', '').replace('</script>', '');
  fs.writeFile(path.join(__dirname, './clock/index.js'), newJS, function (err) {
    if (err) {
      return console.log(`写入JS脚本失败：${err.massage}`);
    }
    console.log(`写入JS脚本成功`);
  })
}

//处理html文件
function resolveHTML(htmlStr) {
  //使用字符串的replace方法，把内嵌的<style>和<script>标签，替换成外联的<link>和<script>标签
  const newHTML = htmlStr
    .replace(regStyle, '<link rel="stylesheet" href="./index.css"/>')
    .replace(regScript, '<script src="./index.js"></script>');
  fs.writeFile(path.join(__dirname,'./clock/index.html'),newHTML,err=>{
    if (err) {
      return console.log(`写入html文件失败：${err.massage}`);
    }
    console.log(`写入html文件成功`);
  })
}